<template>
	<view class="line" :style='[{"width":upx2px(width)},{"height":upx2px(height)},{"padding-left":upx2px(margin)},{"padding-right":upx2px(margin)}]'>
		<view class="line2" :style='{"background":color}'></view>
	</view>
</template>

<script>
	export default {
		props: {
			margin: {
				type: String,
				default: '0px'
			},
			height: {
				type: String,
				default: '1upx'
			},
			width: {
				type: String,
				default: '100%'
			},
			color: {
				type: String,
				default: '#DDDDDD'
			},
		},
		data() {
			return {

			};
		},
		methods:{
			upx2px(upx) {
				//如果是upx结尾，则去掉upx并转换为px
				if(upx.endsWith("upx")) {
					upx = upx.replace("upx","")
				} else if(upx.endsWith("px") || upx.endsWith("%")) {//如果是px或%结尾，则原样返回
					return upx
				} 
				//如果没有传入单位，则为upx
				return uni.upx2px(upx) + "px";
			}
		}
	}
</script>

<style>
	.line {
		box-sizing: border-box;
	}

	.line2 {
		width: 100%;
		height: 100%;
	}
</style>
